<template>
    <div>
        <!-- <h4> 注册发送验证码</h4> -->
        <van-cell-group inset>
            <van-field center  clearable label="短信验证码" placeholder="请输入短信验证码" v-model="code">
                <template #button>
                    <van-button size="small" type="primary" @click="sendCode" v-if="flag">发送验证码</van-button>
                    <van-button size="small" type="primary" :disabled="!flag" v-else>{{count}}s后再次发送</van-button>
                </template>
            </van-field>
        </van-cell-group>

        <van-button round :disabled="!flag" type="success" @click="goPass">下一步</van-button>
    </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';

import { getCheckCode } from '@/api/user'; // 发送短信验证码的方法

import { useUserStore } from '@/store/useStore'  // pinia

import { showDialog } from 'vant'; // 弹出框 显示提示信息

import { useRouter } from 'vue-router';
const router = useRouter()   // 使用router

const user = useUserStore()  // 使用 pinia
let code = ref('')
let timer = null;

let flag = ref(true)
const count = ref(4);  // 倒计时的值

// 定时器函数
const timeCount = ()=>{
    timer = setInterval(()=>{
    if(count.value == 0){
        flag.value = !flag.value  //倒计时完毕，显示原来的按钮
        clearInterval(timer) // 结束计时
        count.value = 4   // 恢复倒计时的时间
    }else{
        count.value--   // 开始倒计时
    }    
},1000)
}
 

// 1. 点击发送验证码，显示倒计时 还有多少秒，同时按钮变成不可点；倒计时结束后， 恢复之前的显示
//  1.1  对定时器进行减减，为0时，清空定时器， 重新赋值时间
// 2. 失败了，给出提示;   成功，就 跳转下一步

const sendCode = async()=>{

    // 1. 按钮变成  倒计时xx秒，开始倒计时
    flag.value = false
    timeCount()    

    // 2. 发送验证码，看是否 成功
    let res = await getCheckCode({tel:user.tel})
    // console.log(res,555);

    code.value = res.data;
    // showDialog({message: res.message })
    }

    const goPass = ()=>{
        // 跳转到写一个页面
        router.push('/register/password')
    }

</script>
 
<style scoped lang="scss"> 
.van-cell-group{
    margin-top: 10px;
    .van-field__button{
        display: flex;
    }
    :deep(.van-button--small){
        border-radius: 30px;
        background: rgb(249, 86, 86);
        border: none;
        padding: 20px 10px;
       
    }

    }
    .van-button--round{
        width: 90%;
        margin: 10px auto;
        margin-left: 5%;
        background: rgb(249, 86, 86);
        border: none;
    }
</style>